<template>
	<div>
		<navigation-bar>
			<div class="searchContent">
				<el-input v-model="moduleName" placeholder="请输入模块名称" size="mini"
					style="width: 120px; margin-right: 10px"></el-input>

				<el-date-picker placeholder="请选择时间段" v-model="times" size="small" style="width: 340px; margin-right: 10px"
					type="daterange" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
					:picker-options="rangePickerOptions" @change="
						(e) => {
							dateRangeChange(e)
						}
					">
				</el-date-picker>

				<el-input v-model="userName" placeholder="请输入操作者" size="mini"
					style="width: 120px; margin-right: 10px"></el-input>

				<el-select v-model="oprValue" clearable placeholder="请选择操作类别" size="mini"
					style="width: 130px; margin-right: 10px">
					<el-option v-for="item in oprList" :key="item.value" :label="item.label" :value="item.value"
						width="150px">
					</el-option>
				</el-select>
				<custom-button type="search" style="margin-right: 10px" @searchClick="searchClick"></custom-button>
				<custom-button type="reset" style="margin-right: 10px" @resetClick="resetClick"></custom-button>
			</div>
		</navigation-bar>
		<table-index :dataSource="dataSource" :tableColumns="tableColumns" :btnList="btnList" btnListWidth="80px"
			:pageSize="pageSize" :pageCount="pageCount" :pageNo="pageNo" @pageChange="pageChange"
			@viewRow="viewRow"></table-index>

		<div v-if="dialogShow">
			<custom-dialog :title="dialogTitle" size="large" @dialogClose="dialogClose">
				<common-test-trace :keyId="ttId" :routeUrl="ttRouteUrl" :pageParam="pageParam"
					:dataVersion="dataVersion"></common-test-trace>
			</custom-dialog>
		</div>
	</div>
</template>

<script>
import commonTestTrace from "@/components/customComponents/commonTestTrace"
import customDialog from "@/components/customComponents/customDialog"
import customButton from "@/components/customComponents/customForm/customButton"
import navigationBar from "@/components/customComponents/managementCenter/navigationBar"
import { AjaxCommon } from "@/libs/apiCommon"
import { PopupCommon } from "@/libs/popupCommon"
import { SessionCommon } from "@/libs/sessionCommon"
import moment from "moment"
import tableIndex from "./spTable"
export default {
	components: {
		navigationBar,
		customButton,
		tableIndex,
		customDialog,
		commonTestTrace,
	},
	data() {
		return {
			pageParam: {},
			dataVersion: "",
			ttId: "",
			ttRouteUrl: "",
			ttInterface: "",
			rangePickerOptions: {
				shortcuts: [
					{
						text: "最近一周",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近一个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近三个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit("pick", [start, end])
						},
					},
				],
			},
			times: [],
			userName: "",
			moduleName: "",
			oprValue: "",
			oprList: [
				{
					label: "修改操作",
					value: "UPDATE",
				},
				{
					label: "删除操作",
					value: "DELETE",
				},
			],
			// table 相关参数  begin
			dataSource: [],
			tableColumns: [
				{
					prop: "optTypeName",
					label: "操作类别",
					width: 120
				},
				{
					prop: "tableMark",
					label: "模块名",
					width: 340,
				},
				{
					prop: "createTime",
					label: "操作时间",
					width: 180,
				},
				{
					prop: "createByName",
					label: "操作者",
					width: 120,
				},
				{
					prop: "optIp",
					label: "操作者ip地址",
					width: 180,
				},
				{
					prop: "optReason",
					label: "操作原因",
				},
			],
			btnList: ["view"],
			pageSize: 20,
			pageCount: 100,
			pageNo: 1,
			// 弹窗是否显示
			dialogShow: false,
			// 弹窗标题 (新增修改不同)
			dialogTitle: "",
		}
	},

	methods: {
		dateRangeChange(value) {
			let format = "YYYY-MM-DD HH:mm:ss"
			if (value) {
				let newValue = []
				newValue.push(moment(value[0]).format(format))
				newValue.push(moment(value[1]).format(format))
				console.log(newValue, "newValue....")
				this.time = newValue
			}
		},
		dialogClose() {
			this.dialogShow = false
		},
		searchClick() {
			this.pageNo = 1
			this.initPage()
		},
		resetClick() {
			this.deviceName = ""
			this.status = ""
			this.device_type = ""
		},
		// 分页点击事件
		pageChange(p) {
			this.pageNo = p
			this.initPage()
		},
		viewRow(d) {
			const pageParam = decodeURIComponent(d.data.pageParam)
			this.dataVersion = d.data.dataVersion
			this.pageParam = pageParam
			// 这个id应该为痕迹记录的那条数据的id，而不是痕迹记录本身的id，这里用的设备的数据，先直接用id，等痕迹写完再进行修改
			this.ttId = pageParam.id
			this.ttRouteUrl = d.data.pageUrl
			this.dialogShow = true
			this.dialogTitle =
				"查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
		},
		// 初始化事件
		initPage() {
			let self = this
			let newTime = this.time
			let startDate = ""
			let endDate = ""
			if (newTime && newTime.length > 0) {
				startDate = newTime[0].substr(0, 10)
				endDate = newTime[1].substr(0, 10)
			}
			console.log(startDate, endDate)
			AjaxCommon("/ccdc/common/trance/queryTrances", "post", {
				startDate,
				endDate,
				tableMark: this.moduleName,
				createByName: this.userName,
				optType: this.oprValue,
				pageNo: this.pageNo,
				pageSize: this.pageSize,
			}).then((res) => {
				if (res.data.code == 200) {
					let newData = res.data.result.records
					newData = newData.map(t => {
						t.optTypeName = t.optType == "UPDATE" ? "修改" : "删除"
						return t
					})
					self.dataSource = newData
					self.pageCount = res.data.result.total
				} else {
					PopupCommon.notify("error", res.data.message)
				}
			})
		},
	},
	mounted() {
		this.initPage()
	},
}
</script>

<style></style>
